<template>
    <!-- 所有的内容要被根节点包含起来-->
    <div class="box" v-loading="isLoading">
        <div id="news">
            文件类型分析
            <div id="myChart" :style="{ width: '500px', height: '500px' }"></div>
            <br>
        </div>
    </div>
    
</template>
   
<script>

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
    name: 'hello',
    data() {
        return {
            isLoading: false
        }
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            var myChart = echarts.init(document.getElementById('myChart'));
            myChart.setOption({
                series: [
                    {
                        type: 'pie',
                        data: [
                            {
                                value: 335,
                                name: '直接访问'
                            },
                            {
                                value: 234,
                                name: '联盟广告'
                            },
                            {
                                value: 1548,
                                name: '搜索-引擎'
                            },
                            {
                                value: 234,
                                name: '联盟广告00'
                            },
                            {
                                value: 234,
                                name: '联盟广9告'
                            },
                            {
                                value: 234,
                                name: '联盟广告8'
                            },
                            {
                                value: 234,
                                name: '联盟广告7'
                            },
                            {
                                value: 234,
                                name: '联盟广告6'
                            },
                            {
                                value: 234,
                                name: '联盟广告5'
                            },
                            {
                                value: 234,
                                name: '联盟广告4'
                            },
                            {
                                value: 234,
                                name: '联盟广告2'
                            },
                            {
                                value: 254,
                                name: '联广告'
                            },
                            {
                                value: 234,
                                name: '联盟告'
                            },
                            {
                                value: 234,
                                name: '盟广告'
                            },
                            {
                                value: 234,
                                name: '联盟广告1'
                            },
                        ],
                        radius: '50%'
                    }
                ]
            });

        }
    }
}
</script>

<style scoped>
.box {
  width: 600px;

  height: 500px;
  /* background: rgba(189, 182, 182, .1); */
  background: #fff;
  margin: auto;
  border-radius: 5px;
  padding: 20px;
}
</style>